<template>
  <div class="main-container">

  
    <div class="newsBox">
      <div class="left">
        <div class="share" id="share">
          <div class="title">分享</div>
        </div>
        <ul>
          <li>
            <a href="https://wx.qq.com/s" target="_blank">
              <img src="/img/icon1.png" alt=""/>
              <span>微信分享</span>
            </a>
          </li>
          <li>
            <a href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fweibo.com%2F" target="_blank">
              <img src="/img/icon2.png" alt=""/>
              <span>新浪微博</span>
            </a>
          </li>
          <li>
            <a href="https://qzone.qq.com/" target="_blank">
              <img src="/img/icon3.png" alt=""/>
              <span>QQ空间</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="/img/icon4.png" alt=""/>
              <span>复制链接</span>
            </a>
          </li>
        </ul>
      </div>

      <div class="center">
        <div class="detailBox">
          <h1 class="animationTitle">{{ news.title }}</h1>
          <h4 class="source">{{ news.create_time }}</h4>
          <span v-html="news.content"></span>
        </div>
        <div class="titlePublic">
          <div class="left">
            <span class="title">讨论</span>
          </div>
        </div>
        <div class="discussList">
          <div class="discussBox">
            <!-- 头像 -->
            <div class="discussBoxL">
              <img src="/img/new1.jpg" alt=""/>
            </div>
            <!-- 昵称、详情、回复 -->
            <div class="discussBoxR">
              <h5 class="nicheng">又见一年春夏</h5>
              <p class="discussText">看着很好吃的样子</p>
              <div class="ip">
                <div><span>03-10.重庆</span><span class="reply">回复</span></div>
                <div>
                  <i class="iconfont icon-zan"></i>
                  <i class="iconfont icon-cai"></i>
                  <i class="iconfont icon-gengduo-shuxiang"></i>
                </div>
              </div>
              <!-- 回复部分开始 -->
              <div class="discussBox reply_discussBoxR">
                <!-- 头像 -->
                <div class="discussBoxL">
                  <img src="/img/new2.jpg" alt=""/>
                </div>
                <div class="discussBoxR">
                  <h5 class="nicheng">喜欢吃梨</h5>
                  <p class="discussText">想去看看</p>
                  <div class="ip">
                    <div><span>04-04.吉林</span><span class="reply">回复</span></div>
                    <div>
                      <i class="iconfont icon-zan"></i>
                      <i class="iconfont icon-cai"></i>
                      <i class="iconfont icon-gengduo-shuxiang"></i>
                    </div>
                  </div>

                  <p class="more">展开3条回复 &nbsp;&nbsp;⬇</p>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="titlePublic">
          <div class="left">
            <span class="title">更多资讯</span>
          </div>
        </div>
        <div class="fangtanBox">
          <div class="boxs6" v-for="(item, index) in newsList" :key="index">
            <a href="javascript:;" @click="openDetail(item)">
              <div class="left">
                <p class="titles">{{ item.title }}</p>
              </div>
              <div class="right">
                <img :src="item.img">
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { listNews, getNewsContent } from '@/api/news'

export default  {
  name: 'NewsDetail',
  data() {
    return {
      newsList: [],
      news: {},
    }
  },
  created() {
    const newsId = this.$route.params.newsId
    this.getNews(newsId)
    this.getNewsList()
  },
  methods: {
    getNews(newsId) {
      getNewsContent(newsId).then(res => {
        this.news = res.data
      })
    },
    getNewsList() {
      listNews().then(res => {
        this.newsList = res.data
      })
    },
    openDetail(news) {
      const news_id = news.news_id
      const protocol = window.location.protocol
      const host = window.location.host
      const href = protocol + '//' + host + '/news/' + news_id + '/detail'
      window.location.href = href
      // this.$router.push({
      //   path: '/news/' + news_id + '/detail'
      // })
    },
  },
}
</script>
